<template>
  <view class="page">
    <Navbar title="周边景点详情" />
    <u-sticky customNavHeight="0" z-index="6">
      <u-image
        show-loading
        :src="detail.cover_img"
        width="100%"
        height="248px"
        @click="preImage"
      />
    </u-sticky>
    <view class="body">
      <view class="padding">
        <Sub-title :label="detail.title" bottom-color="#E9F4F4" />
        <u-text
          :text="detail.address || ''"
          prefix-icon="map-fill"
          icon-style="font-size: 28rpx; color: #1A98FC; margin-right: 20rpx"
          lines="1"
          line-height="60rpx"
          color="#979797"
          size="28rpx"
          @click="handleMap"
        />
      </view>
      <u-gap height="8rpx" bg-color="#F6F6FB" />
      <view class="padding">
        <Sub-title label="景点详情" bottom-color="#E9F4F4" />
        <u-parse :content="detail.content" />
      </view>
    </view>
  </view>
</template>

<script>
import Navbar from "@/components/Navbar/index";

import { qiuAroundDetail } from "@/request/qiuApi.js";
export default {
  components: { Navbar },
  data() {
    return {
      detail: {},
    };
  },
  onLoad(e) {
    this.getData(e.id);
  },
  // 监听页面滚动
  onPageScroll(scroll) {
    uni.$emit("onPageScroll", scroll.scrollTop);
  },
  methods: {
    // 预览图片
    preImage() {
      uni.previewImage({
        urls: [this.detail.cover_img],
      });
    },
    // 跳转地图
    handleMap() {
      const { lat, lng, address } = this.detail;
      // uni.openLocation({
      //   latitude: lat,
      //   longitude: lng,
      //   address: address,
      //   scale: 16,
      // });
      uni.navigateTo({ url: `/pages/parse/map?lat=${lat}&lng=${lng}` });
    },
    // 获取详情
    getData(id) {
      qiuAroundDetail({ id }).then((res) => {
        if (res.code == 1) {
          this.detail = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .body {
    width: 100%;
    z-index: 8;
    min-height: 100rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: -80rpx;
    border-radius: 40rpx 40rpx 0 0;
    position: relative;
    .padding {
      padding: 20rpx;
    }
  }
}
</style>
